<template>
  <div
    style="
      display: flex;
      align-items: center;
      padding: 1vh 1vw;
      margin-left: 20vw;
      width: 78vw;
      height: 98vh;
    "
  >
    <div
      style="
        padding: 0 4vh;
        display: flex;
        align-items: center;
        width: 100%;
        height: 10vh;
        background-color: rgb(255, 60, 60);
        color: #fff;
      "
    >
      <!-- 音乐图片 -->
      <div
        class="music-pic"
        style="height: 8vh; width: 8vh; border-radius: 4vh; overflow: hidden"
      >
        <img
          :class="picDeg ? 'picCircle' : 'none'"
          src="../../../assets//pic/songPic.jpg"
          style="width: 100%; height: 100%"
        />
      </div>
      <!-- 音乐名称/歌词/进度条 -->
      <div
        style="
          margin-left: 3vh;
          display: flex;
          justify-content: center;
          flex-direction: column;
          height: 8vh;
        "
      >
        <!-- 歌名 -->
        <div style="cursor: default">
          <div style="font-weight: 600; cursor: pointer">
            {{ songInfo.name }}
          </div>
        </div>
        <!-- 歌词 -->
        <div style="cursor: pointer">{{ songInfo.text[textIndex] }}</div>
        <!-- 歌曲进度条 -->
        <div
          style="
            display: flex;
            align-items: center;
            position: relative;
            margin-top: 1vh;
            width: 80vh;
            height: 0.2vh;
            border: 0.4vh solid #fff;
          "
        >
          <!-- 歌曲进度条 -->
          <div
            :style="{ width: jinduLeft + 'vh' }"
            style="height: 0.1vh; border: 0.5vh; border: 0.4vh solid #00f"
          ></div>
          <!-- 歌曲进度点 -->
          <div
            :style="{ left: jinduLeft + 'vh' }"
            style="
              position: absolute;
              top: 0;
              transform: translate(0, -50%);
              height: 1vh;
              width: 1vh;
              background-color: red;
              border-radius: 1vh;
              cursor: pointer;
            "
          ></div>
          <!-- 时间 -->
          <div
            style="
              position: absolute;
              right: -9vh;
              top: 0;
              transform: translate(0, -50%);
              font-size: 12px;
              color: #fff;
            "
          >
            {{ jinduTime }}/{{ songInfo.length }}
          </div>
        </div>
      </div>
      <!-- 播放按钮 -->
      <div style="margin-left: 15vh; display: flex; align-items: center">
        <!-- 上一首 -->
        <div class="circle-btn" title="上一首">&lt;</div>
        <!-- 播放 -->
        <div
          v-if="!isPlay"
          class="circle-btn"
          @click="playMusicClick"
          title="开始播放"
        >
          <img style="width: 2vh;height: 2vh;" src="../../../assets/pic/play.png" />
         
        </div>
        <div
          v-if="isPlay"
          class="circle-btn"
          @click="playMusicClick"
          title="停止播放"
        >
          <img style="width: 2vh;height: 2vh;" src="../../../assets/pic/pause.png" />
         
        </div>
        <!-- 下一首 -->
        <div class="circle-btn" title="上一首">></div>
        <!-- 播放模式 -->
        <div
          style="margin-left: 2vh; width: 4vh; height: 4vh; cursor: pointer"
          @click="playModeChange"
        >
          <img
            v-if="playMode == 0"
            src="../../../assets/pic/recycle.png"
            title="循环播放"
            style="width: 100%; height: 100%"
          />
          <img
            v-if="playMode == 1"
            src="../../../assets/pic/random.png"
            title="随机播放"
            style="width: 100%; height: 100%"
          />
        </div>
        <!-- 目录 -->
        <div style="margin-left: 2vh; width: 4vh; height: 4vh; cursor: pointer">
          <img
            title="歌单"
            src="../../../assets/pic/songs.png"
            style="width: 100%; height: 100%"
          />
        </div>
        <!-- 收藏 -->
        <div style="margin-left: 2vh; width: 4vh; height: 4vh; cursor: pointer">
          <img
            title="收藏"
            src="../../../assets/pic/star.png"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
      <!-- 广告 -->
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 2vh;
          height: 8vh;
          width: 17vh;
          background-color: grey;
          color: #fff;
          user-select: none;
        "
      >
        广告招租
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlay: false,
      songInfo: {
        name: "我们的歌",
        text: [
          "情人总分分合合 可是我们却越爱越深",
          "认识你 让我的幸福如此悦耳",
          "能不能不要切歌 继续唱我们的歌",
          "让感动 一辈子都记得",
        ],
        length: "3:28",
      },
      playMode: 0,
      jinduTime: "0:00",
      jinduLeft: 0,
      textIndex: 0,
      songSeconds: 0,
      picDeg: false,

      // 定时器
      time: null,
    };
  },
  mounted() {
    this.getSongSecond();
  },
  methods: {
    // 开始播放
    playMusicClick() {
      this.isPlay = !this.isPlay;
      if (this.isPlay) {
        this.songStar();
      } else {
        this.songPause();
      }
    },
    // 进度条开始
    songStar() {
      let everySecond = 80 / this.songSeconds;

      let total = 0;
      if (this.jinduLeft) {
        total = this.jinduLeft / everySecond;
      }

      // 图片转动
      this.picDeg = true;

      this.time = setInterval(() => {
        // 歌词滚动
        if (total % 8 == 0) {
          this.textIndex++;
          if (this.textIndex == this.songInfo.text.length) {
            this.textIndex = 0;
          }
        }

        // 进度条时间
        let min = Math.trunc(total / 60);

        let sec = 0;
        if (total < 60) {
          sec = total;
        } else {
          sec = (total % 60).toFixed(0);
        }
        if (sec < 10) {
          sec = "0" + sec;
        }
        this.jinduTime = min + ":" + sec;

        // 进度条位置
        this.jinduLeft = everySecond * total;
        total++;

        // 结束条件
        if (total == this.songSeconds) {
          clearInterval(this.time);
        }
      }, 1000);
    },
    // 歌曲停止
    songPause() {
      // 图片 停止转动
      this.picDeg = false;
      // 关闭进度条
      clearInterval(this.time);
    },
    // 进度秒
    jinduTimeGoing() {},
    // 获取歌曲秒数
    getSongSecond() {
      let total = this.songInfo.length.split(":");
      let min = total[0] * 60;
      let sec = total[1] * 1;
      this.songSeconds = min + sec;

      let everySecond = 80 / this.songSeconds;
      this.jinduLeft = everySecond;
    },
    // 播放模式 修改
    playModeChange() {
      this.playMode++;
      if (this.playMode > 1) {
        this.playMode = 0;
      }
    },
  },
};
</script>

<style scoped>
.music-pic {
  background-color: rgba(200, 200, 200, 0.6);
  cursor: pointer;
}

.music-pic:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.circle-btn {
  user-select: none;
  margin-right: 1vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  width: 5vh;
  height: 5vh;
  border-radius: 5vh;
  border: 0.5vh solid #fff;
  color: #fff;
}

.circle-btn:hover {
  border: 0.5vh solid #ffaf26;
  color: #ffaf26;
  cursor: pointer;
}

@keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.picCircle {
  animation: circle 20s infinite;
}
</style>